<template>
  <div class="search_content">
    <div class="search_content_box">
      <slot name="search"></slot>
      <!-- <el-input :placeholder="placeholder" prefix-icon="el-icon-search" v-model="searchInput" class="inputClass" @keyup.enter.native="inputEnter"> </el-input> -->
      <div class="search_box_btn">
        <slot></slot>
        <el-divider direction="vertical"></el-divider>
        <!-- 排序 -->
        <el-popover ref="sortPopoverRefs" placement="bottom" :title="$t('teamDoc.tags.sort')" width="240"
          trigger="click" popper-class="popper_class_box">
          <div class="popper_sort_item" v-for="(item, index) in list[isHaveType]" :key="index"
            @click="sortListClick(item)">
            <span>{{ item.title }}</span>
            <div v-if="item.valueIndex != 0" class="sort_icon">
              <i class="el-icon-caret-top" :class="[item.valueIndex == 1 ? 'icon_color_active' : '']"></i>
              <i class="el-icon-caret-bottom" :class="[item.valueIndex == 2 ? 'icon_color_active' : '']"></i>
            </div>
          </div>
          <div slot="reference" class="sort_box">
            <svg-icon icon-class="sort"></svg-icon>
            <span>{{ $t('teamDoc.tags.sort') }}</span>
          </div>
        </el-popover>
      </div>
      <!-- <slot name="search"></slot> -->
    </div>
  </div>
</template>

<script>
export default {
  name: "search-sort",
  props: {
    placeholder: {
      type: String,
      default: "搜索文件、文件夹"
    },
    isHaveType: {
      type: String,
      default: "have" //have 表示有type值 ,no 表示没有type, onlyTime只有时间排序
    }
  },
  components: {},
  data () {
    return {
      list: {
        have: [
          {
            title: "文件名称",
            valueIndex: 0,
            value: [{ sortAsc: "type,real_name" }, { sortDesc: "type,real_name" }]
          },
          {
            title: "大小",
            valueIndex: 0,
            value: [{ sortAsc: "type,size" }, { sortDesc: "type,size" }]
          },
          {
            title: "创建时间",
            valueIndex: 0,
            value: [{ sortAsc: "type,create_time" }, { sortDesc: "type,create_time" }]
          }
        ],
        no: [
          {
            title: "文件名称",
            valueIndex: 0,
            value: [{ sortAsc: "label_name" }, { sortDesc: "label_name" }]
          },
          {
            title: "创建时间",
            valueIndex: 0,
            value: [{ sortAsc: "create_time" }, { sortDesc: "create_time" }]
          }
        ],
        onlyTime: [
          {
            title: "创建时间",
            valueIndex: 0,
            value: [{ sortAsc: "create_time" }, { sortDesc: "create_time" }]
          }
        ]
      },
      searchInput: "",
      sortValue: null,
      sortList: [
        {
          title: "文件名称",
          valueIndex: 0,
          value: [{ sortAsc: "type,real_name" }, { sortDesc: "type,real_name" }]
        },
        {
          title: "大小",
          valueIndex: 0,
          value: [{ sortAsc: "type,size" }, { sortDesc: "type,size" }]
        },
        {
          title: "创建时间",
          valueIndex: 0,
          value: [{ sortAsc: "type,create_time" }, { sortDesc: "type,create_time" }]
        }
      ],
      noTypeSortList: [
        {
          title: "文件名称",
          valueIndex: 0,
          value: [{ sortAsc: "label_name" }, { sortDesc: "label_name" }]
        },
        {
          title: "创建时间",
          valueIndex: 0,
          value: [{ sortAsc: "create_time" }, { sortDesc: "create_time" }]
        }
      ],
      onlyTimeSortList: [
        {
          title: "创建时间",
          valueIndex: 0,
          value: [{ sortAsc: "create_time" }, { sortDesc: "create_time" }]
        }
      ]
    };
  },
  mounted () { },
  methods: {
    getList () {
      if (this.isHaveType == "have")
      {
        this.list = [...this.sortList];
      } else if (this.isHaveType == "no")
      {
        this.list = [...this.noTypeSortList];
      } else if (this.isHaveType == "onlyTime")
      {
        this.list = [...this.onlyTimeSortList];
      }
      return this.list;
    },

    /**输入框回车事件 */
    inputEnter () {
      this.$emit("inputEnter", this.searchInput);
    },

    /**排序事件 */
    sortListClick (item) {
      if (this.sortValue && this.sortValue.title == item.title)
      {
        item.valueIndex == 2 ? (item.valueIndex = 0) : item.valueIndex++;
      } else
      {
        if (this.isHaveType == "have")
        {
          this.sortList.forEach((items) => {
            items.valueIndex = 0;
          });
        }
        if (this.isHaveType == "no")
        {
          this.noTypeSortList.forEach((items) => {
            items.valueIndex = 0;
          });
        }
        if (this.isHaveType == "onlyTime")
        {
          this.onlyTimeSortList.forEach((items) => {
            items.valueIndex = 0;
          });
        }

        item.valueIndex++;
      }
      this.sortValue = item;
      console.log(this.sortValue, "11111");
      this.$emit("sortListClick", this.sortValue);
      this.$refs.sortPopoverRefs.showPopper = false;
    }
  }
};
</script>

<style scoped lang="scss">
.search_content {
  .search_content_box {
    display: flex;
    align-items: center;
    // justify-content: space-between;
    height: 48px;
    padding-right: 20px;
    margin-left: 20px;
    border-bottom: 1px solid #eee;

    .inputClass {
      width: 220px;

      :deep(.el-input__inner){
        border: 0;
      }
    }

    .sort_box {
      color: #999;
      font-size: 15px;
      cursor: pointer;
      border-radius: 4px;
      padding: 8px;
      transition: all 0.2s ease;
      margin-left: 5px;

      span {
        color: #666;
        font-size: 14px;
        margin-left: 5px;
      }

      &:hover {
        color: #6698ff !important;
        background: rgba(102, 152, 255, 0.1);

        span {
          color: #6698ff !important;
        }
      }
    }

    .el-divider--vertical {
      margin: 0 10px;
    }
  }

  .search_box_btn {
    display: flex;
    align-items: center;
  }
}

.popper_sort_item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 9px 20px;
  color: #333;
  cursor: pointer;

  &:hover {
    background-color: #f5f5f5;
  }

  .sort_icon {
    display: flex;
    flex-direction: column;
    // align-items: center;
    // justify-content: center;
    font-size: 0;

    .el-icon-caret-bottom {
      margin-top: -5px;
    }

    i {
      color: #666;
      font-size: 12px;
    }
  }

  .icon_color_active {
    color: #6698ff !important;
  }
}
</style>

<style lang="scss">
.popper_class_box {
  font-size: 14px;
  padding: 12px 0;

  .el-popover__title {
    color: #cacaca;
    font-size: 14px;
    padding: 0 20px;
  }
}
</style>
